<template>
    <view class="ImgShow">
        <u-overlay :show="isShow" @click="hide">
            <view class="warp">
                <view class="rect" @tap.stop>
                    <u-swiper :list="list" height="300" :autoplay="false" @change="change" :current="idx" :keyName="keyName" indicator indicatorMode="dot" imgMode="aspectFit" indicatorActiveColor="#3c9cff" indicatorInactiveColor="rgba(60,156,255,0.35)"></u-swiper>
                    <view class="divCenterW mart-30 btnGroup">
                        <u-button @click="save" class="custom-btn" type="primary" size="medium">保存到相册</u-button>
                    </view>
                </view>
            </view>
        </u-overlay>
    </view>
</template>

<script>
export default {
    name: "ImgShow",
    data() {
        return {
            isShow: false,
            idx: 0,
        };
    },
    props: {
        //图片数据源
        list: {
            type: Array,
            default() {
                return [];
            },
        },

        //需要显示图片的属性名，list中的数据直接就是url的数据，那么此属性传 "" 空串
        keyName: {
            type: String,
            default: "url",
        },
    },

    methods: {
		init(arr) {
		    this.list = arr;
		    this.show()
		},
        //显示组件
        show(_idx = 0) {
            this.isShow = true;
            this.$nextTick(() => {
                this.idx = _idx;
            });
        },

        //隐藏
        hide() {
            this.isShow = false;
            this.$emit("hide");
        },

        change(event) {
            this.idx = event.current;
        },

        save() {
            // #ifdef APP-PLUS
            let item = this.list && this.list[this.idx];

            uni.downloadFile({
                url: item.url,
                success: (res) => {
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                this.$app.Tips({ title: "保存成功！", icon: "none" });
                                return;
                            },
                            fail: () => {
                                this.$app.Tips({ title: "保存失败！" });
                                return;
                            },
                        });
                    }
                },
                fail(err) {
                    console.log("下载失败", err);
                },
            });
            // #endif

            // #ifdef H5
            console.error("H5不支持保存文件，请使用App！");
            // #endif
        },
    },
};
</script>

<style scoped>
.btnGroup {
    display: flex;
    justify-content: space-around;
}

.btnGroup .u-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
}

.ImgShow {
    position: relative;
    z-index: 99999;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}

.rect {
    width: 100%;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 10px;
}

.custom-btn {
    padding: 0 10rpx;
}
</style>
